<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="检测侵权"
    width="800"
    draggable
    @close="close"
    :z-index="2000"
  >
    <el-table :data="tableList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="name" label="风险内容">
        <template #default="{ row }">
          <span class="text-red-500">{{ filterName(row.detection_name) }}</span>
          匹配到的关键词 <span class="text-red-500">{{ row.keyword }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="风险定位">
        <template #default="{ row }">
          <span class="text-red-500">{{ filterLocal(row.detection_name) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button type="primary" @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="AuditModal">
import { reactive, toRefs, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["query"]);
const data = reactive({
  tableList: [],
  visible: false,
  load: false,
});
const { visible, tableList, load } = toRefs(data);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  tableList.value = data;
  visible.value = true;
};

const nameMap = new Map([
  ["brand_name", "品牌名称"],
  ["spu_title", "产品标题"],
  ["keyword", "关键词"],
  ["detail_description", "产品详细描述"],
  ["text_description", "纯文本描述"],
  ["highlights_description", "亮点描述"],
  ["package_description", "包裹描述"],
  ["mobile_description", "移动端描述"],
]);

const localMap = new Map([
  ["brand_name", "SPU信息 => 产品品牌"],
  ["spu_title", "综合产品信息 => 商品描述 => 产品标题"],
  ["keyword", "综合产品信息 => 商品描述 => 关键词组"],
  ["detail_description", "综合产品信息 => 商品描述 => 产品详情描述"],
  ["text_description", "综合产品信息 => 商品描述 => 纯文本描述"],
  ["highlights_description", "综合产品信息 => 商品描述 => 亮点描述"],
  ["package_description", "综合产品信息 => 商品描述 => 包裹描述(信息)"],
  ["mobile_description", "综合产品信息 => 商品描述 => 移动描述"],
]);

const filterName = (val) => {
  return nameMap.get(val);
};
const filterLocal = (val) => {
  return localMap.get(val);
};

const close = () => {
  proxy.resetForm("formRef");
  visible.value = false;
};
defineExpose({ open });
</script>
